<template>
  <view>
    <canvas class="canvas-area"  canvas-id="postCanvars"></canvas>

    <view class="share-area">
      <image class="code-bg" :src="sharePoster" mode="widthFix"></image>
      <image class="code-img" :src="imageUrl"></image>
    </view>

    <view class="btn-area">
      <button class="line-circle-btn">稍后分享</button>
      <button class="share-btn">稍后分享</button>
      <button @tap="saveFile" class="line-circle-btn">保存图片</button>
    </view>
  </view>
</template>

<script>
export default{
  data(){
    return {
      imageUrl: 'https://img13.360buyimg.com/n5/jfs/t15574/103/2503735642/354259/239cea20/5aaf4e5cN7ed2aacd.jpg',
      sharePoster: 'https://img13.360buyimg.com/n5/jfs/t15574/103/2503735642/354259/239cea20/5aaf4e5cN7ed2aacd.jpg',//图片地址

    }
  },
  mounted(){
    let pages = getCurrentPages();
    let curPage = pages[pages.length-1];
    let option = curPage.options || curPage.$route.query;
    let dataJson = JSON.parse(decodeURIComponent(option.params))
    this.imageUrl = dataJson.imageUrl
    this.sharePoster = dataJson.sharePoster
    // #ifdef MP-WEIXIN
    uni.downloadFile({
      url: dataJson.sharePoster,
      success: function(res){
        this.sharePoster = res.tempFilePath
      }
    })

    uni.downloadFile({
      url: dataJson.imageUrl,
      success:function(res){
        this.imageUrl = res.tempFilePath
      }
    })

  },
  onLoad(option) {
    let dataJson = JSON.parse(decodeURIComponent(option.params))
    this.imageUrl = dataJson.imageUrl
    this.sharePoster = dataJson.sharePoster
    // #ifdef MP-WEIXIN
    uni.downloadFile({
      url: dataJson.sharePoster,
      success: function(res){
        this.sharePoster = res.tempFilePath
      }
    })

    uni.downloadFile({
      url: dataJson.imageUrl,
      success:function(res){
        this.imageUrl = res.tempFilePath
      }
    })

    // #endif
  },
  methods:{
    saveFile(){
      let _this = this
      uni.getImageInfo({
        src: this.sharePoster,
        success(res) {
          let ctx = uni.createCanvasContext('postCanvars')
          //设置画布的宽高
          ctx.setFillStyle('#FFFFFF'); // 默认白色
          ctx.fillRect(0, 0, uni.upx2px(690), uni.upx2px(910))
          //画背景
          ctx.drawImage(res.path, 0, 0, uni.upx2px(690), uni.upx2px(910))
          //画圆 注意保存之前的绘画，为图片变成圆形，做准备
          ctx.save()
          ctx.beginPath()
          ctx.arc(uni.upx2px(690 / 2), uni.upx2px(732 + 69), uni.upx2px(69), 0, Math.PI * 2)
          ctx.clip()
          //画二维码
          ctx.drawImage(_this.imageUrl, uni.upx2px((690 - 138) / 2), uni.upx2px(732), uni.upx2px(138), uni.upx2px(138))

          ctx.draw(true, () => {
            uni.canvasToTempFilePath({
              canvasId: 'postCanvars',
              success: (res) => {
                uni.saveImageToPhotosAlbum({
                  filePath:res.tempFilePath,
                  success: (res) => {
                    uni.hideLoading()
                    uni.showToast({
                      title:'生成海报成功'
                    })
                  },
                  fail: (res) => {
                    uni.hideLoading()
                    uni.showToast({
                      title:'生成海报失败'
                    })
                  }
                })
              },
              fail: (res) => {
                uni.hideLoading()
                uni.showToast({
                  title:'生成海报失败'
                })
              }
            })
          })
        },
        fail: (res) => {
          uni.hideLoading()
          uni.showToast({
            title:'保存图片失败'
          })
        }
      })


    }
  }
}
</script>

<style>

.share-area{
  width: 690rpx;
  margin: 30rpx;
  position: relative;
}

.canvas-area{
  width: 690rpx;
  height: 910rpx;
  background: '#FFFFFF';
  border-radius: 20rpx;
  position: absolute;
  left: -10000rpx;
}

.code-bg{
  width: 100%;
  border-radius: 20rpx;
}

.code-img{
  width: 138rpx;
  height: 138rpx;
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translate(-50%);
  border-radius: 50%;
}

.line-circle-btn{
  width: 177rpx;
  height: 62rpx;
  border-radius: 50rpx;
  line-height: 62rpx;
  border-radius: 35rpx;
  font-size: 26rpx;
  color: #666666;
  border: 1px solid #B8B8B8;
}

.share-btn{
  width: 198rpx;
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;
  background: #EB2C3E;
  border-radius: 38rpx;

  font-size: 34rpx;
  font-weight: 500;
  color: #FFFFFF;
}

button::after{
  border: none;
}

.btn-area{
  display: flex;
  margin: 0 69rpx;
  align-items: center;
}

</style>
